<template>
  <ContentBox :has-corner="true" class="community-rank">
    <ContentBoxTitle title="季度评分" />
    <div class="community-rank__content">
      <canvas ref="el" :width="computedCanvasWidth" :height="computedCanvasHeight"></canvas>
    </div>
  </ContentBox>
</template>

<script>
import ContentBox from '@/components/ContentBox'
import ContentBoxTitle from '@/components/ContentBoxTitle'
import * as echarts from 'echarts'
export default {
  name: 'CommunityRank',
  components: {
    ContentBox,
    ContentBoxTitle
  },
  props: {
    indicator: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      canvasWidth: 300,
      canvasHeight: 200
    }
  },
  computed: {
    computedCanvasHeight () {
      return this.$base * this.canvasHeight
    },
    computedCanvasWidth () {
      return this.$base * this.canvasWidth
    }
  },
  mounted () {
    let indicator = this.indicator.slice();
    let data = this.data.slice()
    console.log(indicator)
    let n = -1
    const option = {
      color: ['#FFD200'],
      tooltip: {
      },
      radar: [
        {
          indicator: indicator,
          center: ['50%', this.$base * this.canvasHeight * .2 + this.$base * 45],
          radius: this.$base * 60,
          startAngle: 90,
          shape: 'circle',
          nameGap: this.$base * 8,
          name: {
            formatter (txt) {
              n++
              return `{a|${txt}}{b${n}| ${data[n]}分}`
            },
            rich: {
              a: {
                color: '#fff',
                fontSize: this.$base * 12
              },
              b0: { color: '#3BD5B3', fontSize: this.$base * 12, fontWeight: 600 },
              b1: { color: '#08FF49', fontSize: this.$base * 12, fontWeight: 600 },
              b2: { color: '#08C8FF', fontSize: this.$base * 12, fontWeight: 600 },
              b3: { color: '#F59000', fontSize: this.$base * 12, fontWeight: 600 },
              b4: { color: '#943BE3', fontSize: this.$base * 12, fontWeight: 600 },
              b5: { color: '#FA6D64', fontSize: this.$base * 12, fontWeight: 600 },
              b6: { color: '#B0EAFF', fontSize: this.$base * 12, fontWeight: 600 },
              b7: { color: '#44AE10', fontSize: this.$base * 12, fontWeight: 600 },
              b8: { color: '#A177FF', fontSize: this.$base * 12, fontWeight: 600 },
            }
          },
          splitArea: {
            areaStyle: {
              color: ['transparent']
            }
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#13539A',
              width: this.$base
            }
          }
        }
      ],
      series: [
        {
          name: '雷达图',
          type: 'radar',
          data: [
            {
              value: data,
              name: 'Data B',
              areaStyle: {
                color: 'rgba(255, 210, 0, 0.5)'
              },
              label: {
                show: true,
                formatter: '{c}分',
                color: '#e4e4e4'
              }
            }
          ],
          itemStyle: {
            opacity: 0
          },
          lineStyle: {
            width: 2,
            normal: {
            }
          }
        }
      ]
    };

    const instance = echarts.init(this.$refs.el)
    instance.setOption(option)
  }
}
</script>

<style lang="scss">
.community-rank {
  width: $base * 320px;
  height: $base * 230px;
  .content-box-title__content {
    width: $base * 230px;
  }
}
</style>